<template>
  <div class="detail">
     <div class="swiper-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
        v-for="photo in mainPhoto"
        :key="photo.id"
        >
          <img v-lazy="photo.url"/>
        </van-swipe-item>
      </van-swipe>
    </div>
 <!-- 分隔线 -->
    <van-divider>商品图文详情</van-divider>
    <div class="detail-content">
      <img
      v-for="item in detailImgs"
      :key="item.image.id"
      v-lazy="item.image.url"
      />
    </div>
     <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="total" @click='addToCart'/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click='addToCartHandler'/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'
export default {
  name: 'Detail',
  data() {
    return {
      details: {},
      mainPhoto: [],
      detailImgs: []
    }
  },
  created() {
    console.log('detail:', this)
    getDetail(this.$route.params.id).then(res => {
      console.log('响应数据:', res)
      this.mainPhoto = res.photo
      this.detailImgs = res.descContentList.filter(item => item.photo)
      this.details = res
    })
  },
  computed: {
    total() {
      return this.$store.getters.TotalCount
    }
  },
  methods: {
    addToCart() {
      this.$router.push('/cart')
    },
    addToCartHandler() {
      // 构建payload
      const { id, title, thumbnail, price } = this.details
      const payload = {
        id,
        title,
        desc: title,
        img: thumbnail,
        amount: 1,
        price
      }
      this.$store.commit('addItemToCart', payload)
    }
  }
}
</script>

<style lang="scss" scoped>
 .swiper-container {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
  }
  .my-swipe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .detail-content {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }
</style>
